<template>
    <div class="wechat-config-container">
      <pro-table
        ref="proTableRef"
        :columns="columns"
        :request="getList"
        :search-config="searchConfig"
      >
        <template #toolbar>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>新增配置
          </el-button>
        </template>
      </pro-table>
  
      <!-- 新增/编辑对话框 -->
      <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        width="500px"
        destroy-on-close
      >
        <el-form
          ref="formRef"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="租户名称" prop="tenantName">
            <el-input v-model="form.tenantName" disabled />
          </el-form-item>
          <el-form-item label="AppID" prop="appId">
            <el-input v-model="form.appId" placeholder="请输入微信AppID" />
          </el-form-item>
          <el-form-item label="AppSecret" prop="appSecret">
            <el-input v-model="form.appSecret" placeholder="请输入微信AppSecret" />
          </el-form-item>
          <el-form-item label="Token" prop="token">
            <el-input v-model="form.token" placeholder="请输入微信Token" />
          </el-form-item>
          <el-form-item label="EncodingAESKey" prop="encodingAESKey">
            <el-input v-model="form.encodingAESKey" placeholder="请输入EncodingAESKey" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入备注信息"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="loading">
            确 定
          </el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  
  // 表格列配置
  const columns = [
    { prop: 'tenantName', label: '租户名称', search: true },
    { prop: 'appId', label: 'AppID' },
    { prop: 'appSecret', label: 'AppSecret', showOverflowTooltip: true },
    { prop: 'token', label: 'Token' },
    { prop: 'encodingAESKey', label: 'EncodingAESKey', showOverflowTooltip: true },
    { prop: 'createTime', label: '创建时间' },
    { prop: 'updateTime', label: '更新时间' },
    {
      prop: 'operation',
      label: '操作',
      width: 200,
      fixed: 'right',
      render: (scope) => {
        return [
          {
            type: 'primary',
            text: '编辑',
            click: () => handleEdit(scope.row)
          },
          {
            type: 'danger',
            text: '删除',
            click: () => handleDelete(scope.row)
          }
        ]
      }
    }
  ]
  
  // 搜索配置
  const searchConfig = {
    labelWidth: '100px'
  }
  
  // 表单数据
  const form = reactive({
    tenantName: '',
    appId: '',
    appSecret: '',
    token: '',
    encodingAESKey: '',
    remark: ''
  })
  
  // 表单校验规则
  const rules = {
    appId: [
      { required: true, message: '请输入微信AppID', trigger: 'blur' }
    ],
    appSecret: [
      { required: true, message: '请输入微信AppSecret', trigger: 'blur' }
    ],
    token: [
      { required: true, message: '请输入微信Token', trigger: 'blur' }
    ],
    encodingAESKey: [
      { required: true, message: '请输入EncodingAESKey', trigger: 'blur' }
    ]
  }
  
  const dialogVisible = ref(false)
  const dialogTitle = ref('')
  const loading = ref(false)
  const formRef = ref(null)
  const proTableRef = ref(null)
  
  // 获取列表数据
  const getList = async (params) => {
    // TODO: 调用接口获取数据
    return {
      list: [],
      total: 0
    }
  }
  
  // 新增配置
  const handleAdd = () => {
    dialogTitle.value = '新增微信配置'
    dialogVisible.value = true
  }
  
  // 编辑配置
  const handleEdit = (row) => {
    dialogTitle.value = '编辑微信配置'
    Object.assign(form, row)
    dialogVisible.value = true
  }
  
  // 删除配置
  const handleDelete = async (row) => {
    try {
      await ElMessageBox.confirm('确认删除该配置吗？', '提示', {
        type: 'warning'
      })
      // TODO: 调用删除接口
      ElMessage.success('删除成功')
      proTableRef.value?.reload()
    } catch (error) {
      console.error('删除失败:', error)
    }
  }
  
  // 提交表单
  const handleSubmit = async () => {
    if (!formRef.value) return
    
    try {
      await formRef.value.validate()
      loading.value = true
      // TODO: 调用保存接口
      ElMessage.success('保存成功')
      dialogVisible.value = false
      proTableRef.value?.reload()
    } catch (error) {
      console.error('保存失败:', error)
    } finally {
      loading.value = false
    }
  }
  </script>
  
  <style scoped>
  .wechat-config-container {
    padding: 20px;
  }
  </style>